<template>
  <view class="container">
    <view class="avatar">
      <image src="/static/images/avatar.png"></image>
    </view>

    <view class="form">
      <u--form labelPosition="left" :model="business" :rules="rules" ref="web">
        <u-form-item label="手机" prop="mobile" borderBottom>
          <u--input
            v-model="business.mobile"
            border="none"
            placeholder="请输入手机号"
          ></u--input>
        </u-form-item>

        <u-form-item label="密码" prop="password" borderBottom>
          <u--input
            type="password"
            v-model="business.password"
            border="none"
            placeholder="请输入密码"
          ></u--input>
        </u-form-item>

        <view style="margin-top: 25px">
          <u-button type="warning" @click="submit">注册登录</u-button>
        </view>
      </u--form>
    </view>

    <!-- 提醒组件 -->
    <u-toast ref="notice" />
  </view>
</template>
<script>
export default {
  onReady() {
    //为了兼容小程序设置验证规则
    this.$refs.web.setRules(this.rules);
  },
  data() {
    return {
      business: {
        mobile: "15555555555",
        password: "123123",
      },
      rules: {
        mobile: [
          {
            required: true,
            message: "请输入手机号码",
            trigger: ["change", "blur"],
          },
          {
            //自定义验证函数 使用uView自带效验规则
            validator: (rule, value, callback) => uni.$u.test.mobile(value),
            message: "手机号码格式有误",
            trigger: ["change", "blur"],
          },
        ],
        password: {
          required: true,
          message: "请输入密码",
          trigger: ["change", "blur"],
        },
      },
    };
  },
  methods: {
    submit() {
      //只有当满足效验规则的时候才发起请求
      this.$refs.web
        .validate()
        .then(async (res) => {
          var result = await uni.$u.http.post("/business/web", this.business);

          if (result.code == 0) {
            this.$refs.notice.show({
              type: "error",
              message: result.msg,
            });

            return false;
          } else {
            this.$refs.notice.show({
              type: "success",
              message: result.msg,
              complete() {
                //本地存储
                uni.setStorageSync("business", result.data);

                //返回上一个界面
                uni.$u.route({
                  type: "back",
                  delta: 1,
                });
              },
            });
          }
        })
        .catch((error) => {
          this.$refs.notice.show({
            type: "error",
            message: "表单效验失败",
          });
        });
    },
  },
};
</script>

<style>
page {
  background-color: #f8fafe;
}

.container .avatar {
  text-align: center;
  background-color: #fff;
}

.avatar image {
  width: 120px;
  height: 120px;
  margin: 50px 0;
  border-radius: 50%;
}

.form {
  margin: 0 50rpx;
  box-sizing: border-box;
}

.btn {
  margin-top: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.u-icon {
  margin-left: 10px;
}
</style>
